<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" aria-labelledby="createOrEditModal" class="modal fade"
    tabindex="-1" role="dialog" aria-hidden="true" [config]="{backdrop: 'static'}">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <form #settingForm="ngForm" novalidate name="settingForm" (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>{{name}}</span>
                        <span>&nbsp; id:{{software.id}}</span>
                    </h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="close()">
                        <i aria-hidden="true" class="ki ki-close"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <tabset class="tab-container tabbable-line">
                        <tab heading="{{l('BaseMsg')}}" customClass="kt-tabs__item">
                            <div class="form-row">
                                <div class="form-group col-6">
                                    <label>{{l("AppName")}}*</label>
                                    <input class="form-control" type="text" name="name" [(ngModel)]="basicMsg.name"
                                        readonly maxlength="32">
                                </div>
                                <div class="form-group col-6">
                                    <label>{{l("versionNumber")}}</label>
                                    <input class="form-control" type="text" name="versionNumber"
                                        [(ngModel)]="basicMsg.versionNumber" readonly maxlength="12">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-6">
                                    <label>{{l("Language")}}</label>
                                    <input class="form-control" type="text" name="language"
                                        [(ngModel)]="basicMsg.language" readonly maxlength="32">
                                </div>
                                <div class="form-group col-6">
                                    <label>{{l("type")}}</label>
                                    <input class="form-control" type="text" name="type" [(ngModel)]="basicMsg.type"
                                        readonly maxlength="32">
                                </div>
                            </div>

                            <div class="form-row">
                                <div class="form-group col-6">
                                    <label>{{l("Author")}}</label>
                                    <input class="form-control" type="text" name="owner" [(ngModel)]="basicMsg.owner"
                                    readonly maxlength="32">
                                </div>
                                <div class="form-group col-6">
                                    <label>{{l("runningEnver")}}</label>
                                    <input class="form-control" type="text" name="envType"
                                        [(ngModel)]="basicMsg.envType" readonly maxlength="32">
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-6">
                                    <label>{{l("resolution")}}</label>
                                    <input class="form-control" type="text" name="resolution"
                                        [(ngModel)]="basicMsg.resolution" readonly maxlength="32">
                                </div>
                                <div class="form-group col-6">
                                    <label>{{l("AppUri")}}</label>
                                    <input class="form-control" type="text" name="exePath"
                                        [(ngModel)]="basicMsg.exePath" readonly>
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-12">
                                    <label>{{l("appsetting")}}</label>
                                    <textarea class="form-control" type="text" name="setting"
                                    readonly [(ngModel)]="basicMsg.setting"></textarea>
                                </div>
                                <div class="form-group col-12">
                                    <label>{{l("description")}}</label>
                                    <textarea class="form-control" type="text" name="description"
                                    readonly [(ngModel)]="basicMsg.description"></textarea>
                                </div>
                            </div>
                        </tab>
                        <tab *ngIf="software.id&&!software.isExpired" heading="{{l('Edit')}}" customClass="kt-tabs__item">
                            <div class="form-row">
                                <div class="form-group col-12">
                                    <label class="control-label">{{l("Alias")}}</label>
                                    <input class="form-control" name="alisas" [(ngModel)]="software.alias" />
                                </div>
                                <div class="form-group col-12">
                                    <label class="control-label">{{l("appsetting")}}</label>
                                    <textarea class="form-control" name="extensionData"
                                        [(ngModel)]="software.extensionData">
                            </textarea>
                                </div>
                                <div class="form-group col-12">
                                    <label class="control-label">{{l("uploadFilePackage")}}</label>
                                    <form name="materialPacketUrlForm" id="materialPacketUrlForm" novalidate>
                                        <input
                                            [ngStyle]="{'width':software?.materialPacketUrl?'80%':'90%','float':'left'}"
                                            class="form-control" type="text" name="materialPacketUrl"
                                            [(ngModel)]="software.materialPacketUrl">
                                        <label for="file" style="float: right;" class="btn btn-primary fileLabel">
                                            {{software?.materialPacketUrl?l('Edit'):l('add')}}
                                            <input class="form-control" type="file" id="file" name="fileUrl"
                                                multiple="false" (change)="uploadFile($event)">
                                        </label>
                                        <label *ngIf="software?.materialPacketUrl" style="margin: 0 5px;float: right;"
                                            class="btn btn-primary" (click)="resetResource()">{{l('Delete')}}</label>
                                    </form>
                                </div>
                                <div class="form-group col-12">
                                    <div class="progress" *ngIf="progress">
                                        <div class="progress-bar progress-bar-info progress-bar-striped"
                                            role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
                                            [ngStyle]="{width: progress+'%'}">
                                            <span class="sr-only">{{progress}}% Complete</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group col-12">
                                    <label class="checkbox">
                                        <input name="isDefault" type="checkbox" [(ngModel)]="software.isDefault">
                                        {{l('isdefaultstart')}}
                                        <span></span>
                                    </label>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" (click)="close()">{{l('Close')}}</button>
                                <button type="submit" class="btn btn-primary blue" [disabled]="!settingForm.form.valid"
                                    [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                                    <i class="fa fa-save"></i>
                                    <span>{{l("Save")}}</span>
                                </button>
                            </div>
                        </tab>
                        <tab *ngIf="software.id&&!software.isExpired" heading="{{l('NaireList')}}" (selectTab)="getPaper()"
                            customClass="kt-tabs__item">
                            <div class="kt-portlet kt-portlet--mobile">
                                <div class="Container row">
                                    <div class="kt-portlet__body">
                                        <div class="row">
                                            <form class="horizontal-form" autocomplete="off">
                                                <div class="kt-form kt-form--label-align-right">
                                                    <div class="row align-items-center m--margin-bottom-10">
                                                        <div class="col-3">
                                                            <div class="form-group kt-form__group align-items-center">
                                                                <label>{{l('name')}}</label>
                                                                <div class="input-group">
                                                                    <input (keyup.enter)="getPaper()" [(ngModel)]="filterText" name="filterText"
                                                                        autoFocus class="form-control kt-input"
                                                                        [placeholder]="l('SearchWithThreeDot')"
                                                                        type="text">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-2">
                                                            <div class="form-group kt-form__group align-items-center">
                                                                <label>{{l('tags')}}</label>
                                                                <div class="input-group">
                                                                    <select class="form-control" [(ngModel)]="tagFilter"
                                                                        name="type">
                                                                        <option value="">{{l('AllTags')}}</option>
                                                                        <option [value]="tag.id"
                                                                            *ngFor="let tag of tags">{{tag.value}}
                                                                        </option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-2">
                                                            <div class="form-group kt-form__group align-items-center">
                                                                <label>&nbsp;</label>
                                                                <div class="input-group">
                                                                    <button type="button" class="btn btn-primary"
                                                                        [buttonBusy]="primengTableHelper.isLoading"
                                                                        (click)="getPaper()">
                                                                        <i class="la la-refresh"></i>
                                                                        {{l("search")}}
                                                                    </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        <div class="col-5 text-right">
                                                            <button type="button" class="btn btn-primary"
                                                                (click)="deleteNaireBatch()">
                                                                <i class="icon-icon-test"></i> {{l('deleteBatch')}}
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>

                                        <div class="row align-items-center">
                                            <!--<Primeng-Datatable-Start>-->
                                            <div class="primeng-datatable-container"
                                                [busyIf]="primengTableHelper.isLoading">
                                                <!-- resizableColumns="primengTableHelper.resizableColumns" -->
                                                <p-table #dataTable (onLazyLoad)="getPaper($event)"
                                                    [value]="primengTableHelper.records"
                                                    [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                                    [(selection)]="paperPublishList" [paginator]="false" [lazy]="true"
                                                    [resizableColumns]="primengTableHelper.resizableColumns"
                                                    [responsive]="primengTableHelper.isResponsive">
                                                    <ng-template pTemplate="header">
                                                        <tr>
                                                            <th>{{l('Actions')}}</th>
                                                            <th style="width: 5.0em">
                                                                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
                                                            </th>
                                                            <th style="width:5%">{{l('RecordId')}}</th>
                                                            <th>{{l('name')}}</th>
                                                            <th>{{l('title')}}</th>
                                                            <th>{{l('compositionType')}}</th>

                                                            <!-- <th pSortableColumn="actualQuestionsCount">{{l('actualQuestionsCount')}}
                                                                        <p-sortIcon field="actualQuestionsCount"></p-sortIcon>
                                                                    </th> -->
                                                            <th>{{l('actualQuestionsCount')}}</th>

                                                            <th pSortableColumn="questionsCount">{{l('questionCount')}}
                                                                <p-sortIcon field="questionsCount"></p-sortIcon>
                                                            </th>
                                                            <!-- <th>{{l('owner')}}</th> -->
                                                            <th>{{l('tags')}}</th>
                                                            <!-- <th pSortableColumn="endDate">{{l('createTime')}}
                                                                        <p-sortIcon field="endDate"></p-sortIcon>
                                                                    </th> -->
                                                            <!-- <th>{{l('Status')}}</th> -->
                                                        </tr>
                                                    </ng-template>
                                                    <ng-template pTemplate="body" let-record let-i="rowIndex">
                                                        <tr [pSelectableRow]="record" [attr.trid]="record.id">
                                                            <td>
                                                                <div class="btn-group">
                                                                    <button type="button" (click)="deleteNaire(record)"
                                                                        class="btn btn-sm btn-primary">
                                                                        <i class="icon-icon-test"></i>{{l("Delete")}}
                                                                    </button>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <p-tableCheckbox [value]="record"></p-tableCheckbox>
                                                            </td>
                                                            <td> {{transIndex(i)}}</td>
                                                            <td>
                                                                <span>{{record.name}}</span>
                                                            </td>
                                                            <td>
                                                                <span>{{record.displayName}}</span>
                                                            </td>
                                                            <td>
                                                                <span
                                                                    *ngIf="record.compositionType==0">{{l("Fixed")}}</span>
                                                                <span
                                                                    *ngIf="record.compositionType==1">{{l("Random")}}</span>
                                                                <span *ngIf="record.compositionType==2">{{l('Fixed')}}
                                                                    + {{l('Random')}}</span>
                                                            </td>
                                                            <td>
                                                                <span>{{record.actualQuestionsCount}}</span>
                                                            </td>
                                                            <td>
                                                                <span>{{record.questionsCount}}</span>
                                                            </td>
                                                            <!-- <td>
                                                                        <span>{{record.owner}}</span>
                                                                    </td> -->
                                                            <td>
                                                                <span *ngFor="let tag of record.tags"
                                                                    class="kt-badge  kt-badge--info kt-badge--inline">
                                                                    {{tag.name}}
                                                                </span>
                                                                <span *ngIf="!record.tags||record.tags.length==0">
                                                                    {{EmptyTdText}}
                                                                </span>
                                                            </td>
                                                            <!-- <td>{{record.endDate| date : "yyyy/MM/dd"}}</td> -->
                                                            <!-- <td>
                                                                        <span *ngIf="record['auditStatus']==1" class="kt-badge  kt-badge--success kt-badge--inline">{{l("On")}}</span>
                                                                        <span *ngIf="record['auditStatus']==0" class="kt-badge  kt-badge--danger kt-badge--inline">{{l("Off")}}</span>
                                                                    </td> -->
                                                        </tr>
                                                    </ng-template>
                                                    <ng-template pTemplate="emptymessage" let-records>
                                                        <tr *ngIf="primengTableHelper.records">
                                                            <td colspan="8">
                                                                <img class="emptymessage"
                                                                    src="/assets/common/images/placeholder/productHolder.png" />
                                                            </td>
                                                        </tr>
                                                    </ng-template>
                                                </p-table>
                                                <div class="primeng-paging-container">
                                                    <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage"
                                                        #paginator (onPageChange)="getPaper($event)"
                                                        [totalRecords]="primengTableHelper.totalRecordsCount"
                                                        [rowsPerPageOptions]="primengTableHelper.predefinedRecordsCountPerPage">
                                                    </p-paginator>
                                                    <span class="total-records-count">
                                                        {{l('TotalRecordsCount',
                                                        primengTableHelper.totalRecordsCount)}}
                                                    </span>
                                                </div>
                                            </div>
                                            <!--<Primeng-Datatable-End>-->
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </tab>
                    </tabset>
                </div>

            </form>
        </div>
    </div>
</div>